<template>
  <div class="login-log-list">
    <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" class="pa-5">
      <avue-crud
        ref="crud"
        v-model="form"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        :search.sync="searchForm"
        @on-load="loadListData"
        @search-change="onSearchChange"
        @search-reset="onSearchReset"
        @refresh-change="onRefresh"
        @selection-change="onSelectionChange"
        @filter-change="onFilterChange"
        @sort-change="onSortChange"
      >
        <template slot="menu" slot-scope="{ row }">
          <el-button type="text" size="small" @click="goDetail(row)">详情</el-button>
          <el-button v-if="row.publishStatus != 1" type="text" size="small" @click="goEdit(row)">编辑</el-button>
          <el-button v-if="row.publishStatus != 1" type="text" size="small" @click="onPublishStatus(row)">
            发布
          </el-button>
          <el-button v-if="row.publishStatus == 1" type="text" size="small" @click="onPublishStatus(row)">
            下架
          </el-button>
          <el-button v-if="row.publishStatus == 1" type="text" size="small" @click="goShare(row)">分享</el-button>
        </template>
        <template slot="publishStatus" slot-scope="{ row }">
          <span v-if="row.publishStatus > 0">
            <span class="status-dot success"></span>
            已发布
          </span>
          <span v-else>
            <span class="status-dot danger"></span>
            未发布
          </span>
        </template>
        <template slot="status" slot-scope="{ row }">
          <span v-if="row.status === '已分享'">
            <span class="status-dot success"></span>
            {{ row.status }}
          </span>
          <span v-else>
            <span class="status-dot danger"></span>
            {{ row.status }}
          </span>
        </template>
      </avue-crud>
    </de-container>
  </div>
</template>

<script>
import { requestTargetPublishPage, requestTargetPublishStatusUpdate } from '@/api/chart/chart'
import DeContainer from '@/components/dataease/DeContainer'
import ListMixin from '@/utils/mixins/list-mixin'
import { DATA_TYPE_OPTIONS } from './indicator-definition.vue'

export default {
  name: 'Chart',
  components: { DeContainer },
  mixins: [ListMixin],
  data() {
    return {
      listApi: requestTargetPublishPage,
      tableOption: {
        menuWidth: 220,
        menuAlign: 'left',
        menuFixed: 'right',
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        selection: false,
        index: true,
        indexFixed: false,
        searchLabelWidth: 100,
        searchMenuPosition: 'left',
        column: [
          {
            label: '指标编码',
            prop: 'code',
            search: true,
            span: 12,
            align: 'left',
            overHidden: true,
            minWidth: 120,
          },
          {
            label: '指标名称',
            prop: 'name',
            span: 12,
            align: 'left',
            search: true,
            overHidden: true,
            minWidth: 120,
          },
          {
            label: '指标分类',
            prop: 'indexType',
            type: 'select',
            span: 12,
            align: 'left',
            search: true,
            overHidden: true,
            dicUrl: '/api/sys/dict/list',
            props: {
              label: 'dictValue',
              value: 'dictValue',
            },
            dicMethod: 'post',
            dicQuery: {
              dictTypeCode: 'martix_type',
            },
            minWidth: 120,
          },
          {
            label: '指标定义',
            prop: 'indexDefine',
            span: 12,
            align: 'left',
            overHidden: true,
            minWidth: 120,
          },
          {
            label: '描述',
            prop: 'remark',
            span: 12,
            overHidden: true,
            minWidth: 120,
          },
          {
            label: '数值类型',
            prop: 'dataType',
            type: 'select',
            search: true,
            span: 8,
            dicData: DATA_TYPE_OPTIONS,
            minWidth: 120,
          },
          {
            label: '版本',
            prop: 'version',
            span: 8,
            minWidth: 120,
          },
          {
            label: '发布状态',
            prop: 'publishStatus',
            type: 'select',
            span: 12,
            align: 'center',
            overHidden: true,
            dicData: [
              { label: '未发布', value: 0 },
              { label: '已发布', value: 1 },
            ],
            minWidth: 120,
          },
          {
            label: '分享状态',
            prop: 'status',
            span: 12,
            align: 'center',
            overHidden: true,
            minWidth: 120,
          },
          {
            label: '发布时间',
            prop: 'publishTime',
            type: 'date',
            span: 24,
            width: 150,
            align: 'center',
            search: true,
            searchRange: true,
          },
        ],
      },
    }
  },
  methods: {
    goDetail(row) {
      this.$router.push(`/redirect/charts/view/${row.id}/?panelId=${row.panelId}`)
      // this.$router.push(`/redirect/charts/${row.id}/view`)
    },
    goEdit(row) {
      this.$router.push(`/redirect/charts/${row.id}/edit`)
    },
    goShare(row) {
      this.$router.push(`/redirect/charts/${row.id}/share-list`)
    },
    async onPublishStatus(row) {
      const action = row.publishStatus == 1 ? '下架' : '发布'
      try {
        await this.$confirm(`确定要${action}吗?`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
      } catch (error) {
        console.log('取消')
        return
      }
      try {
        const { success, message } = await requestTargetPublishStatusUpdate({
          id: `${row.id}`,
          publishStatus: row.publishStatus == 1 ? '0' : '1',
        })
        if (success) {
          this.$message.success(`${action}成功`)
          this.onRefresh()
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.log(error)
        this.$message.error(`${action}失败`)
      }
    },
  },
}
</script>

<style lang="scss"></style>
